import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { totalQuantity, totalPrice } from '../cart/cartSlice';

function CartOverview() {
  const pizzasTotalQuantity = useSelector(totalQuantity);
  const pizzasTotalPrice = useSelector(totalPrice);

  return (
    <div className="flex items-center justify-between bg-stone-800 p-4 uppercase text-stone-200">
      <p className="space-x-4 font-semibold text-stone-300">
        <span>{pizzasTotalQuantity} pizzas</span>
        <span>${pizzasTotalPrice}</span>
      </p>
      <Link to="/cart">Open cart &rarr;</Link>
    </div>
  );
}

export default CartOverview;
